<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ XInfo.query.first().title }}</title>
    <meta name="keywords" content="个人博客,橘子洲"/>
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}"
          type="image/x-icon">
    <meta name="description"
          content="个人博客，是一个站在web前端设计之路的女程序员个人网站。"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ url_for('static', filename='simple/css/base.css') }}"
          rel="stylesheet">
    <link href="{{ url_for('static', filename='simple/css/index.css') }}"
          rel="stylesheet">
    <link href="{{ url_for('static', filename='simple/css/m.css') }}"
          rel="stylesheet">
    <link rel="stylesheet"
          href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    {% block css %}
    {% endblock %}
    <link rel="stylesheet"
          href="{{ url_for('static',filename='highlight/styles/atelier-heath-dark.css') }}">
{#    <link rel="stylesheet"#}
{#          href="{{ url_for('static',filename='simple/css/user_center.css') }}">#}
    <script src="{{ url_for('static', filename='simple/js/jquery.min.js') }}"
            type="text/javascript"></script>
    <script type="text/javascript"
            src="{{ url_for('static', filename='simple/js/hc-sticky.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static', filename='layer-v3.5.1/layer.js') }}"></script>
    {#<script type="text/javascript" src="{{ url_for('static', filename='simple/js/comm.js') }}"></script>#}
    <!--[if lt IE 9]>
<script src="{{ url_for('static', filename='simple/js/modernizr.js') }}"></script>
<![endif]-->
    <style>
        section .container{
            margin-top: 70px;
            width: 1240px;
            max-width: 1240px;
        }
        section .container .main-container {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
        }
        .main-container .left-container {
            min-width: 320px;
            max-width: 320px;
        }
        .main-container .right-container{
            min-width: 320px;
            width: 950px;
            max-width: 950px;
            background: rgba(255,255,255,0.8);
            padding: 15px;
            overflow: hidden;
            color: #797b7c;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 8px #bbb;
            margin-left: 25px;
        }
        .left-container .widget{
            background: rgba(255,255,255,0.8);
            padding: 15px;
            overflow: hidden;
            color: #797b7c;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 8px #bbb;
        }
        .right-container .tabs-warp{

        }
        .widget>.widget-header{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 6px;
            border-bottom: 1px solid #ccc;
            padding: 8px 0;
        }
        .widget .widget-header span {
            font-size: 16px;
            font-weight: 700;
        }
        .widget .widget-header a.slot{}
        .widget .widget-content.stable .str{
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            border-bottom: 1px solid #ccc;
            padding: 8px 0;
        }
        .left-container .widget .widget-avatar>img{
            width: 100px;
            border-radius: 50%;
            display: block;
            margin: 10px auto;
        }
        .tabs-warp .tabs ul{
            display: flex;
            justify-content: start;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .tabs-warp .tabs ul li{
            font-size: 17px;
            margin: 6px 20px;
            width: 80px;
            text-align: center;
        }
        .tabs-warp .tabs ul li.active{
            color:#0E9A00;
            border-bottom: 2px solid #0E9A00;
        }
        .user-set{
            display: block;
            font-size: 1rem;
            margin: 0.3rem;
            color: #334285;
        }
        .user-count-header{
            font-size: 1.2rem;
            color: #123;
        }
        @media screen and (min-width: 1216px){
            .container:not(.is-max-desktop) {
                max-width: 1240px;
            }
            .container:not(.is-max-desktop) {
                max-width: 1240px;
            }
        }
    </style>
</head>
<body>
<header class="header-navigation" id="header">
    <nav>
        <div class="logo"><a href="/">{{ XInfo.query.first().title }}</a>
        </div>
        <h2 id="mnavh"><span class="navicon"></span></h2>
        <div class="navbar-search">
            <div class="search">
                <form action="{{ url_for("main.search_list") }}" method="GET"
                      name="searchform" id="searchform">
                    <input name="content" required id="keyboard"
                           class="input_text" value="请输入关键字词"
                           style="color: rgb(153, 153, 153);"
                           onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                           onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}"
                           type="text">
                    <input name="Submit" class="input_submit" value="搜索"
                           type="submit">
                </form>
            </div>
        </div>
        <ul id="starlist">
            <li><a href="/">首页</a></li>
            <li><a href="/about/">关于</a></li>
            <li><a href="{{ url_for('main.guest_book') }}">留言</a></li>
            <li>
                {% if current_user.is_authenticated %}
                    <div class="dropdown">
                      <button class="dropbtn"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;创建</button>
                      <div class="dropdown-content">
                        <a href="{{ url_for('main.create_club') }}">俱乐部</a>
                        <a href="{{ url_for('main.create_post') }}">分享</a>
                      </div>
                    </div>
                  <div class="dropdown">
                      <button class="dropbtn user-btn">{{ current_user.username }} &nbsp;&nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                      <div class="dropdown-content">
                        <a href="{{ url_for('main.user_center') }}"><i class="fa fa-user-o" aria-hidden="true"></i>&nbsp;个人中心</a>
                        <hr>
                        <a href="{{ url_for('main.logout') }}"><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;退出登录</a>
                      </div>
                    </div>
                {% else %}
                    <li><a href="{{ url_for('main.signin') }}">注册</a></li>
                    <li><a href="{{ url_for('main.login') }}">登录</a></li>
                {% endif %}
            </li>
        </ul>
    </nav>
</header>
<section>
    <div class="container" style="margin-top: 70px">
        <div class="container main-container">
            <div class="left-container">
                <div class="widget">
                    <div class="widget-header">
                        <span>个人资料</span>
                        <a href="/user/profile" class="slot">编辑资料</a>
                    </div>
                    <div class="widget-avatar">
                        <img src="{{ current_user.avatar_hash}}" alt="">
                    </div>
                    <div class="widget-content stable">
                        <div class="str">
                            <div class="slabel">昵称</div>
                            <div class="svalue">{{current_user.username}}</div>
                        </div>
                        <div class="str">
                            <div class="slabel">签名</div>
                            <div class="svalue">
                                这家伙很懒，什么都没留下
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget">
                    <div class="widget-header">
                        <div class="slot user-count-header">账号设置</div>
                    </div>
                    <div class="widget-content">
                        <div class="widget-tips">
                            <a href="{{ url_for('main.update_pwd') }}" class="user-set">修改密码</a>
                            <a href="#" class="user-set">账号设置</a>
                        </div>
                    </div>
                </div>
                <div class="widget">
                    <div class="widget-header">
                        <div><span>粉丝</span> <span class="count">0</span>
                        </div>
                        <div class="slot"><a>更多</a></div>
                    </div>
                    <div class="widget-content">
                        <div class="widget-tips">没有更多内容了</div>
                    </div>
                    <div class="el-dialog__wrapper" style="display: none;">
                        <div role="dialog" aria-modal="true" aria-label="粉丝"
                             class="el-dialog my-dialog"
                             style="margin-top: 15vh;">
                            <div class="el-dialog__header"><span
                                    class="el-dialog__title">粉丝</span>
                                <button type="button" aria-label="Close"
                                        class="el-dialog__headerbtn"><i
                                        class="el-dialog__close el-icon el-icon-close"></i>
                                </button>
                            </div><!----><!----></div>
                    </div>
                </div>
                <div class="widget">
                    <div class="widget-header">
                        <div><span>关注</span> <span class="count">0</span>
                        </div>
                        <div class="slot"><a>更多</a></div>
                    </div>
                    <div class="widget-content">
                        <div class="widget-tips">没有更多内容了</div>
                    </div>
                    <div class="el-dialog__wrapper" style="display: none;">
                        <div role="dialog" aria-modal="true" aria-label="关注"
                             class="el-dialog my-dialog"
                             style="margin-top: 15vh;">
                            <div class="el-dialog__header"><span
                                    class="el-dialog__title">关注</span>
                                <button type="button" aria-label="Close"
                                        class="el-dialog__headerbtn"><i
                                        class="el-dialog__close el-icon el-icon-close"></i>
                                </button>
                            </div><!----><!----></div>
                    </div>
                </div> <!----></div>
            <div class="right-container">
                {% block content %}
                    {% for category, message in get_flashed_messages(with_categories, category_filter) %}
                        <div class="alert alert-{{ category }} alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endblock %}
            </div>
        </div>
    </div>

</section>
<footer style="margin-top:2rem; ">
    <p><a href="/" target="_blank">XSHARE.NET AllRights Reserved.</a> <a
            href="http://beian.miit.gov.cn/">陕ICP备540073000号</a></p>
</footer>
<a href="#" class="cd-top">Top</a>
<script src="{{ url_for('static', filename='highlight/highlight.pack.js') }}"></script>
{% block scripts %}
    {#    {{ super() }}#}
    {{ moment.include_moment() }}　　
    {{ moment.locale('zh-cn') }}　
{% endblock %}
<script>
    $(function () {
        $('pre').each(function (i, block) {
            hljs.highlightBlock(block);
        });
        $('pre code').each(function (i, block) {
            hljs.highlightBlock(block);
        });
    })
</script>
</body>
</html>
